Community

NICE and easy disqus commenting system integration for django/flask blogs!

Hey Harrison and everyone just wanted to share a pretty sweet commenting system integration that you can put almost anywhere very quickly without engineering anything.  I like flask but Im deciding to focus on Django for production because of its great structure for scalability and organization, integrated ORM, sqlite3db, and admin module for automated blogging and other stuff.  Only thing I am currently lacking is pagination for the blog Posts that we made in your Django tutorials.

Here is how to integrate disqus commenting system in your sites.

Create an account at disqus, select 'I want to use it in my site', Select Basic. Add your sites info: shortname (nickname of your choice) and domain (in my case Im devving locally on ubuntu VM and used my dev domain I created 'djang0.me' for my test django blog).   Go to installation instructions, select 'universal code' at bottom and copy the code. I decided to use an include disqus block in my django blogs Post template, which is very nice.  I have a toggle collapse button holding the comment section in a bootstrap col-md-6 panel:

# blog/includes/disqus.html

{% block disqus %}

<div class="container">
	<div class="row">

<a class="btn btn-default arches" role="button" data-toggle="collapse" href="#dcomments" aria-expanded="true" style="width: 120px; display: block; margin: 0 auto; margin-top: 20vh;"> <h4 class="text-success"> Comments » </h4> </a>

		<div class="col-md-6 col-md-offset-3">
						
			<div class="panel collapse stucco" id="dcomments" style="margin-top: 10vh;">

<div id="disqus_thread"></div>

			</div>
			
		</div>
	</div>
</div>

<script>
/**
*  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
*  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
/*
var disqus_config = function () {
this.page.url = djang0.me;  // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = ; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
*/
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = 'https://YOURSHORTHANDNAME.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>

<script id="dsq-count-scr" src="//YOURSHORTHANDNAME.disqus.com/count.js" async></script>

{% endblock %}


# blog/post.html

						{% extends "blog/blogbase.html" %}	

					                    {% block body %}		
													
<div class="container">
		<div class="col-md-12 text-center">
			<h6 class="pull-right"> on {{ post.date }} </h6> <br>
			<h3> {{ post.title }} </h3> <br>
		<img src="{% if post.image %} {{ post.image.url }} {% endif %}" class="img-responsive center-block" align="left" alt=""> 
		 		<p> {{ post.body|safe|linebreaks }} </p>
		</div>
</div>														

{% include 'blog/includes/disqus.html' %}
{% block disqus %}{% endblock %}

								{% endblock %}